<template>
    <div class="merchant-order-management">
        <!-- 查询条件区域 -->
        <div class="query-conditions">
            <h3>查询条件</h3>
            <div class="condition-inputs">
                <el-input v-model="query.orderNo" placeholder="订单号" clearable></el-input>
                <el-date-picker
                        v-model="query.dateRange"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
                <el-select v-model="query.status" placeholder="订单状态" clearable>
                    <el-option label="待付款" value="1"></el-option>
                    <el-option label="待发货" value="2"></el-option>
                    <el-option label="待收货" value="3"></el-option>
                    <el-option label="已完成" value="4"></el-option>
                </el-select>
                <el-button type="primary" @click="handleSearch">查询</el-button>
            </div>
        </div>

        <!-- 主内容区域 -->
        <div class="main-content">
            <!-- 订单列表区域 -->
            <div class="order-list" :class="{ 'detail-active': showDetail }">
                <div class="list-header">
                    <h3>商户订单列表：列出满足条件的订单信息</h3>
                    <el-button
                            v-if="showDetail"
                            type="text"
                            icon="el-icon-arrow-left"
                            @click="showDetail = false">
                        返回列表
                    </el-button>
                </div>

                <el-table :data="orderList" style="width: 100%" v-show="!showDetail">
                    <el-table-column prop="orderNo" label="订单号">
                        <template #default="{ row }">
                            <a class="order-link" @click="showOrderDetail(row)">{{ row.orderNo }}</a>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="下单时间"></el-table-column>
                    <el-table-column prop="customerName" label="客户姓名"></el-table-column>
                    <el-table-column prop="totalAmount" label="订单金额"></el-table-column>
                    <el-table-column prop="status" label="订单状态">
                        <template #default="{ row }">
                            <el-tag :type="getStatusType(row.status)">
                                {{ getStatusText(row.status) }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="220">
                        <template #default="{ row }">
                            <el-button size="small" @click="showOrderDetail(row)">查看详情</el-button>
                            <el-button
                                    v-if="row.status === '3'"
                                    size="small"
                                    type="success"
                                    @click="handleReceive(row)">
                                收货
                            </el-button>
                            <el-button
                                    v-if="row.status === '2'"
                                    size="small"
                                    type="warning"
                                    @click="handlePickup(row)">
                                提货
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 订单详情区域 -->
                <div class="order-detail" v-show="showDetail">
                    <div v-if="currentOrder">
                        <el-descriptions title="订单基本信息" :column="2" border>
                            <el-descriptions-item label="订单号">{{ currentOrder.orderNo }}</el-descriptions-item>
                            <el-descriptions-item label="下单时间">{{ currentOrder.createTime }}</el-descriptions-item>
                            <el-descriptions-item label="客户姓名">{{ currentOrder.customerName }}</el-descriptions-item>
                            <el-descriptions-item label="联系电话">{{ currentOrder.phone || '-' }}</el-descriptions-item>
                            <el-descriptions-item label="收货地址">{{ currentOrder.address || '-' }}</el-descriptions-item>
                            <el-descriptions-item label="订单状态">
                                <el-tag :type="getStatusType(currentOrder.status)">
                                    {{ getStatusText(currentOrder.status) }}
                                </el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item label="订单金额">{{ currentOrder.totalAmount }}</el-descriptions-item>
                            <el-descriptions-item label="支付方式">{{ currentOrder.paymentMethod || '-' }}</el-descriptions-item>
                        </el-descriptions>

                        <div class="goods-list">
                            <h3>商品清单</h3>
                            <el-table :data="currentOrder.goodsList || []" border>
                                <el-table-column prop="goodsName" label="商品名称"></el-table-column>
                                <el-table-column prop="price" label="单价"></el-table-column>
                                <el-table-column prop="quantity" label="数量"></el-table-column>
                                <el-table-column prop="subtotal" label="小计"></el-table-column>
                            </el-table>
                        </div>

                        <div class="order-remark">
                            <h3>订单备注</h3>
                            <p>{{ currentOrder.remark || '无备注' }}</p>
                        </div>
                    </div>
                    <div v-else class="empty-detail">
                        <el-empty description="暂无订单详情数据"></el-empty>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            query: {
                orderNo: '',
                dateRange: [],
                status: ''
            },
            orderList: [
                {
                    orderNo: 'ORD20230001',
                    createTime: '2023-05-01 10:30:22',
                    customerName: '张三',
                    phone: '13800138000',
                    address: '北京市海淀区中关村大街1号',
                    totalAmount: '¥128.00',
                    status: '3', // 待收货
                    paymentMethod: '微信支付',
                    goodsList: [
                        { goodsName: '商品A', price: '¥68.00', quantity: 1, subtotal: '¥68.00' },
                        { goodsName: '商品B', price: '¥30.00', quantity: 2, subtotal: '¥60.00' }
                    ],
                    remark: '请尽快发货'
                },
                {
                    orderNo: 'ORD20230002',
                    createTime: '2023-05-02 14:15:33',
                    customerName: '李四',
                    phone: '13900139000',
                    address: '上海市浦东新区张江高科技园区',
                    totalAmount: '¥256.50',
                    status: '2', // 待发货
                    paymentMethod: '支付宝',
                    goodsList: [
                        { goodsName: '商品C', price: '¥99.00', quantity: 1, subtotal: '¥99.00' },
                        { goodsName: '商品D', price: '¥78.50', quantity: 2, subtotal: '¥157.00' }
                    ],
                    remark: '需要发票'
                },
                {
                    orderNo: 'ORD20230003',
                    createTime: '2023-05-03 09:05:12',
                    customerName: '王五',
                    phone: '13700137000',
                    address: '广州市天河区珠江新城',
                    totalAmount: '¥89.00',
                    status: '4', // 已完成
                    paymentMethod: '微信支付',
                    goodsList: [
                        { goodsName: '商品E', price: '¥89.00', quantity: 1, subtotal: '¥89.00' }
                    ],
                    remark: ''
                }
            ],
            showDetail: false,
            currentOrder: null
        }
    },
    methods: {
        handleSearch() {
            // 这里实际应该是调用API查询
            console.log('查询条件:', this.query)
            // 模拟查询结果
            if (this.query.orderNo) {
                this.orderList = this.orderList.filter(item =>
                    item.orderNo.includes(this.query.orderNo)
                )
            }
        },
        showOrderDetail(order) {
            this.currentOrder = order
            this.showDetail = true
        },
        handleReceive(order) {
            this.$confirm('确认已收到此订单商品?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 实际调用收货API
                order.status = '4' // 更新为已完成
                this.$message.success('收货成功')
            }).catch(() => {
                // 取消操作
            })
        },
        handlePickup(order) {
            this.$confirm('确认已提货并发货?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 实际调用提货API
                order.status = '3' // 更新为待收货
                this.$message.success('提货成功')
            }).catch(() => {
                // 取消操作
            })
        },
        getStatusText(status) {
            const statusMap = {
                '1': '待付款',
                '2': '待发货',
                '3': '待收货',
                '4': '已完成'
            }
            return statusMap[status] || '未知状态'
        },
        getStatusType(status) {
            const typeMap = {
                '1': 'warning',
                '2': 'info',
                '3': '',
                '4': 'success'
            }
            return typeMap[status] || ''
        }
    }
}
</script>

<style scoped>
.merchant-order-management {
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.query-conditions {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f5f7fa;
    border-radius: 4px;
}

.condition-inputs {
    display: flex;
    gap: 10px;
}

.condition-inputs > * {
    flex: 1;
    max-width: 200px;
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.order-list {
    flex: 1;
    background-color: #fff;
    padding: 15px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}

.order-list.detail-active {
    padding: 0;
}

.list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ebeef5;
}

.order-link {
    color: #409eff;
    cursor: pointer;
    text-decoration: none;
}

.order-link:hover {
    text-decoration: underline;
}

.order-detail {
    padding: 20px;
}

.goods-list, .order-remark {
    margin-top: 20px;
}

.order-remark p {
    padding: 10px;
    background-color: #f5f7fa;
    border-radius: 4px;
}

.empty-detail {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
}
</style>